<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-28 09:36:11
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container" v-if="totalConfig">
        <div class="buttonMain">
            <div @click="clickDay(index)" :class="checkIndex == index ? 'buttonBoxYes' : 'buttonBox'"
                v-for="(item, index) in list" :key="index">
                {{ item }}

            </div>
            <el-date-picker @change="changeTime" value-format="yyyy-MM-dd" v-if="list[checkIndex] == '自定义'"
                :clearable="false" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>

        <div style="padding: 20px;background-color: #fff;margin:20px 0px;">
            <div class="title">
                运营指标
            </div>
            <div style=" overflow-x: auto;" class="yunyingBox">
                <div v-for="(item, index) in iconList" class="yunying">
                    <div style="font-size: 1vw;;color: #818391;display: flex;align-items: center;">
                        <img style="width: 12px;height: auto;margin-right: 5px;"
                            :src="require(`@/assets/icon/${item.imgName}.png`)" alt=""> {{ item.name }}
                    </div>
                    <div style="margin: 10px 0px;font-size: 1.2vw;color: #000;margin-left:17px;">
                        {{ totalConfig['运营指标'][index].value }}
                    </div>
                    <div :style="{ visibility: item.name !== '毛利同比差额' && item.name !== '毛利环比差额' ? 'normal' : 'hidden' }"
                        style="display: flex;font-size: 0.5vw;align-items: center;background-color: #DFFAFA;padding: 2px;border-radius: 2px;color: #818391;">
                        <div>
                            环比：{{ totalConfig['运营指标'][index].mom || 0 }}%
                            <img v-if="totalConfig['运营指标'][index].mom >= 0"
                                style="vertical-align: middle;width: 4px;height: auto;" src="@/assets/icon/增长.png"
                                alt="">
                            <img v-else style="vertical-align: middle;width: 4px;height: auto;"
                                src="@/assets/icon/下降.png" alt="">

                        </div>
                        <div style="margin-left: 1px;">
                            同比：{{ totalConfig['运营指标'][index].yoy || 0 }}%
                            <img v-if="totalConfig['运营指标'][index].yoy >= 0"
                                style="vertical-align: middle;width: 4px;height: auto;" src="@/assets/icon/增长.png"
                                alt="">
                            <img v-else style="vertical-align: middle;width: 4px;height: auto;"
                                src="@/assets/icon/下降.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;">
            <div style="background-color: #fff;padding: 20px;width: calc(50% - 20px);margin-right: 20px;">
                <div class="title">
                    品类增减情况排行TOP10
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['品类增减情况排行TOP10']"
                        style="width: 100%" height="250">
                        <el-table-column prop="categoryName" label="品类名称"></el-table-column>
                        <el-table-column prop="visitorsCount" label="来客数"></el-table-column>
                        <el-table-column prop="visitorsPrice" label="客单价"></el-table-column>
                        <el-table-column prop="salesVolume" label="销售额"></el-table-column>
                        <el-table-column prop="grossProfit" label="毛利额"></el-table-column>
                        <el-table-column prop="yoy" label="同比增减额" width="90"></el-table-column>
                        <el-table-column prop="mom" label="环比增减额" width="90"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;width: calc(50%);">
                <div class="title">
                    股东单位销售基本面分析
                </div>
                <div style="margin-top: 15px;">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="totalConfig['股东单位销售基本面分析']" style="width: 100%"
                        height="250">
                        <el-table-column prop="name" label="排名">
                            <template slot-scope="scope">
                                <img v-if="scope.$index == 0" src="@/assets/icon/排名1.png" alt="">
                                <img v-if="scope.$index == 1" src="@/assets/icon/排名2.png" alt="">
                                <img v-if="scope.$index == 2" src="@/assets/icon/排名3.png" alt="">
                                <span v-if="scope.$index > 2"> {{ scope.$index + 1 }}</span>

                            </template>
                        </el-table-column>
                        <el-table-column prop="shareholderUnit" label="连锁名称"></el-table-column>
                        <el-table-column prop="visitorsCount" label="来客数"></el-table-column>
                        <el-table-column prop="visitorsPrice" label="客单价"></el-table-column>
                        <el-table-column prop="salesVolume" label="销售额"></el-table-column>
                        <el-table-column prop="grossMarginRate" label="毛利率"></el-table-column>
                        <el-table-column prop="visitorsCountDifference" label="来客数差值" width="90"></el-table-column>
                        <el-table-column prop="visitorsPriceDifference" label="客单价差值" width="90"></el-table-column>
                        <el-table-column prop="salesVolumeDifference" label="销售差额"></el-table-column>
                        <el-table-column prop="grossProfitDifference" label="毛利差额"></el-table-column>
                        <el-table-column prop="grossProfitGrowthRate" label="毛利率增长率" width="100"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;;">
                <div class="title">
                    股东单位品类增减情况排行TOP10(毛利率增减值)
                </div>
                <div style="margin-top: 15px;" v-if="tableData">
                    <el-table :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData.data" style="width: 100%"
                        height="250">
                        <el-table-column prop="shareholderUnit" label="股东单位"></el-table-column>
                        <el-table-column :prop="key" :label="key"
                        v-if="key !== 'shareholderUnit'"     v-for="(value, key, index,) in tableData.data[0]"></el-table-column>

                    </el-table>
                </div>
            </div>

        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {
                isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                days: 1, //最近几天天数
                beginDate: "", //自定义开始时间
                endDate: "" //自定义结束时间
            },
            value1: [],
            totalConfig: null,
            tableData: null,
            checkIndex: 0,
            list: ['今天', '近7日', '近30日', '自定义'],
            iconList: [
                {
                    name: '销售额',
                    imgName: '销售数据1-销售额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '毛利额',
                    imgName: '销售数据2-毛利额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '毛利率',
                    imgName: '销售数据3-毛利率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'

                },
                {
                    name: '来客数',
                    imgName: '销售数据4-来客数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'

                },
                {
                    name: '客单价',
                    imgName: '销售数据5-客单价',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '购件数',
                    imgName: '销售数据6-购件数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '客品次',
                    imgName: '销售数据7-客品次',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '品数量',
                    imgName: '销售数据8-品数量',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '毛利同比差额',
                    imgName: '销售数据9-毛利同比差额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '毛利环比差额',
                    imgName: '销售数据10-毛利环比差额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
            ]
        }
    },
    mounted() {

        this.totalConfig = window.PLATFROM_CONFIG.salesData;
        this.getData();

    },
    methods: {
        getToday() {
            var getTime = new Date().getTime(); //获取到当前时间戳
            var time = new Date(getTime); //创建一个日期对象
            var year = time.getFullYear(); // 年
            var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
            var date = time.getDate().toString().padStart(2, '0'); // 日
            var hour = time.getHours().toString().padStart(2, '0'); // 时
            var minute = time.getMinutes().toString().padStart(2, '0'); // 分
            var second = time.getSeconds().toString().padStart(2, '0'); // 秒

            this.$set(this.form, 'beginDate', year + "-" + month + "-" + date)
            this.$set(this.form, 'endDate', year + "-" + month + "-" + date)
            this.value1 = [year + "-" + month + "-" + date, year + "-" + month + "-" + date]


            this.getData();

        },
        getData() {

            this.$baseRequest('/sales/sata/operationalIndicators', this.form, {}, 'post').then(res => {
                this.totalConfig['运营指标'][0] = res.data.articleQuantity;
                this.totalConfig['运营指标'][1] = res.data.grossProfit;
                this.totalConfig['运营指标'][2] = res.data.grossMarginRate;
                this.totalConfig['运营指标'][3] = res.data.visitorsCount;
                this.totalConfig['运营指标'][4] = res.data.visitorsPrice;
                this.totalConfig['运营指标'][5] = res.data.ordersQuantity;
                this.totalConfig['运营指标'][6] = res.data.visitorsCategory;
                this.totalConfig['运营指标'][7] = res.data.articleQuantity;
                this.totalConfig['运营指标'][8] = res.data.grossProfitYOY;
                this.totalConfig['运营指标'][9] = res.data.grossProfitMOM;
                this.totalConfig['运营指标'].forEach(item => {
                    if (item.yoy) {
                    
                        item.yoy = item.yoy.replace('%', '')
                       
                    }
                    if (item.mom) {
                        item.mom = item.mom.replace('%', '')
                    }
                })
            });

            this.$baseRequest('/sales/sata/categoryIncreaseDecrease', this.form, {}, 'post').then(res => {
                this.totalConfig['品类增减情况排行TOP10'] = res.data;
            })
            this.$baseRequest('/sales/sata/fundamentalAnalysis', this.form, {}, 'post').then(res => {
                this.totalConfig['股东单位销售基本面分析'] = res.data;
            })
            this.$baseRequest('/sales/sata/shareholderUnitCategoryIncreaseDecrease', this.form, {}, 'post').then(res => {
            
                this.tableData = res.data;

              

            })
        },
        changeTime(e) {
            if (e) {
                this.form = {
                    isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                    days: '', //最近几天天数
                    beginDate: e[0], //自定义开始时间
                    endDate: e[1] //自定义结束时间
                }
                this.getData();

            }
        },
        clickDay(index) {
            this.checkIndex = index;
            switch (index) {
                case 0:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 1, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;

                case 1:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 7, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;
                case 2:
                    this.form = {
                        isCustom: 0, //是否为自定义（0 否 最近几天 1 是）
                        days: 30, //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getData();

                    break;
                case 3:
                    this.form = {
                        isCustom: 1, //是否为自定义（0 否 最近几天 1 是）
                        days: '', //最近几天天数
                        beginDate: "", //自定义开始时间
                        endDate: "" //自定义结束时间
                    }
                    this.getToday();
                    break;
            }
        }



    }
}
</script>
<style></style>
<style lang="scss" scoped>
.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    // width: 120px;
    flex: 1;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 10px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;

}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
</style>
